/*
 * @Author       : 骇熊的锅
 * @Date         : 2024-09-10 14:42:46
 * @LastEditors  : 骇熊的锅 
 * @LastEditTime : 2024-09-10 14:49:01
 * @Description  : 典型场景
 假设你有一个父组件需要访问子组件中的 DOM 元素，
 比如一个 input 元素，你可以使用 React.forwardRef 来将 ref 从父组件传递到子组件的 DOM 元素。
 */

/* 
// 不使用 React.forwardRef 的情况
import React from 'react';
class Input extends React.Component {
    render() {
        return <input type="text" />;
    }
}
class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.inputRef = React.createRef();
    }
    componentDidMount() {
        // 无法访问 Input 组件中的 <input> DOM 元素
        console.log(this.inputRef.current); // 输出 null
    }
    render() {
        return <Input ref={this.inputRef} />;
    }
} */

import React from 'react';

// 使用 forwardRef 将 ref 传递到子组件的 DOM 元素
const Input = React.forwardRef((props, ref) => (
    <input type="text" ref={ref} />
));

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.inputRef = React.createRef();
    }

    componentDidMount() {
        // 可以访问到 Input 组件内部的 <input> DOM 元素
        console.log(this.inputRef.current); // 输出 <input> 元素
        this.inputRef.current.focus();
    }

    render() {
        return <Input ref={this.inputRef} />;
    }
}

export default Parent;
